<template>
	<view class="con">
		<view class="body">
			<!-- 选择地址 -->
			<view class="d_box boxshadow address">
				<view class="">
					<!-- <view class="title">
						<text class="c3">
							订单信息
						</text>
					</view>
					<view class="info">
						<view class="i_bottom flex">
							<view class="ib-l">
								<text class="icon-dizhi1"></text>
							</view>
							<view class="ib-r">
								<text>订单编号：{{orderDetail.sn || ''}}</text>
								<text>下单时间：{{orderDetail.created_time || ''}}</text>
								<text>订单状态：{{orderDetail.status_text || ''}}</text>
						
							</view>
						</view>
					</view> -->
					<view class="info">
						<view class="i_bottom flex">
							<view class="ib-l">
								<text class="icon-dizhi"></text>
							</view>
							<view class="ib-r">
								<view class="ib-t">
									<text>收货人：{{orderDetail.address.recipient || ''}}</text>
									<text>{{orderDetail.address.phone_number || ''}}</text>
								</view>

								<text v-if="orderDetail.pick_up_way ==1 ">收货地址：门店自提</text>
								<text
									v-else>收货地址：{{orderDetail.address.address + orderDetail.address.extra_field1 || ''}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 客户信息 -->
			<!-- <view class="cus-info">
				<view class="id-label">
					身份证号
				</view>
				<view class="id-card">
					130124199101072430
				</view>
			</view> -->
			<!-- 订单详情 -->
			<view class="d_box boxshadow">
				<view class="">
					<view class="title">
						<text class="c3">
							康源生活
						</text>
					</view>
					<view class="info">
						<view class="ul ">
							<serve :isDetail="isDetail" :isOrder="isOrder" v-for="item in (orderDetail.order_goods)"
								:goodsItem="item"></serve>
						</view>
						
					</view>
				</view>
			</view>
			<view class="o-box boxshadow">
				<view class="cont">
					<view class="li_item">
						<view class="field">
						
						</view>
						<view class="val">{{orderDetail.status_text}}</view>
					</view>
					<view class="li_item">
						<view class="field">
							配送方式
						</view>
						<view class="val" style="text-align: right;">
							<view class="">
								免运费
							</view>
							<view class="">
								快递发货
							</view>
						</view>
					</view>
					
					<!-- <view class="li_item" v-if="orderDetail.status!=0">
						<view class="field">
							支付方式
						</view>
						<view class="val">微信支付</view>
					</view> -->
					<view class="li_item" v-if="orderDetail.coupon_info.coupon_name">
						<view class="field">
							优惠券-{{orderDetail.coupon_info.coupon_name}}
						</view>
						<view class="val">-￥{{orderDetail.coupon_info.coupon_price}}</view>
					</view>
					<view class="li_item">
						<view class="field">
							商品金额
						</view>
						<view class="val" >￥{{orderDetail&&orderDetail.money_amount?orderDetail.money_amount:''}}</view>
					</view>
					<view class="li_item">
						<view class="field">
							运费
						</view>
						<view class="val">+￥0.00</view>
					</view>
					<view class="li_item"  v-if="orderDetail.status!=0">
						<view class="field">
						
						</view>
						<view class="val" v-if="orderDetail.status!=1">
							实付款: <text style="color: red; font-weight: 700;">￥{{orderDetail.money_amount}}</text>
							<view v-if="orderDetail.jifen_amount">实付积分: <text style="color: red; font-weight: 700;">{{orderDetail.jifen_amount}}</text></view>
							
							
						</view>
						<view class="val" v-else>
							应付款: <text style="color: red; font-weight: 700;">￥{{orderDetail.money_amount}}</text>
						</view>
					</view>
					<view class="li_item" v-if="orderDetail.status == 3&&orderDetail.order_send.company">
						<view class="field">
							快递信息
						</view>
						<view class="val">
							{{orderDetail.order_send.company}}-{{orderDetail.order_send.logistics_number }}</view>
					</view>

				</view>
			</view>
		</view>
		<view class="b_part">
			<view class="bp_item">
				<view class="">
					<text style="color: #999;">订单编号：</text> {{orderDetail&&orderDetail.sn?orderDetail.sn:''}}
				</view>
				<text class="copy_btn" @click="copy(orderDetail.sn)">复制</text>
			</view>
			<view class="bp_item">
				<view class="">
					<text style="color: #999;">创建时间：</text> {{orderDetail&&orderDetail.created_time?orderDetail.created_time:''}}
				</view>
			</view>
		</view>
		<view class="bottom_fg">

		</view>

		<view class="total-box">
			<view class="t_l">

			</view>
			<view class="t_r">
				<view class="btn_item" v-if="orderDetail.status==4">
					<u-button @click="pingjia(orderDetail.id)" :loading="load" class="addOrder" text="去评价" shape="circle"></u-button>
				</view>
				<view class="btn_item" v-if="orderDetail.status==2">
					<u-button @click="payOff(orderDetail.id)" :loading="load" class="addOrder" text="申请退款" shape="circle"></u-button>
				</view>
				<view class="btn_item" v-if="orderDetail.status==3">
					<u-button  @click="towuliu(orderDetail.id)" :loading="load"  class="addOrder" text="查看物流"  shape='circle'></u-button>
				</view>
				<view class="btn_item" v-if="orderDetail.status==3">
					<u-button  @click="queShou(orderDetail.id)" :loading="load"  class="addOrder" text="确认收货"  shape='circle'></u-button>
				</view>
				<view class="btn_item" v-if="orderDetail.status==1">
					<u-button  @click="cancelOrder(orderDetail.id)" :loading="load"  class="addOrder" text="取消订单"  shape='circle'></u-button>
				</view>
				<view class="btn_item"  v-if="orderDetail.status==1">
					<u-button @click="pay" :loading="load"  class="addOrder" text="立即支付"  shape='circle'></u-button>
				</view>

			</view>
		</view>
		
	</view>
</template>

<script>
	import serve from "@/components/serves/servetwo.vue"
	import {
		getOrderDetail,
		delOrder,
		cancelOrder,
		refundOrder,
		receive
	} from "@/api/order.js"
	import {
		payOrder
	} from "@/api/addOrder.js"
	// import {wxPay} from "@/utils/pay.js";
	import payAll from "@/utils/pay.js"
	export default {
		data() {
			return {
				isOrder: true,
				isDetail: true,
				defaultAddr: true,
				user_note: "",
				// orderGoods:uni.getStorageSync("orderInfo").order_goods||[]
				orderDetail: {},
				load: false,
				isPayTypes: false,
			}
		},
		computed: {

		},
		components: {
			serve
		},
		onLoad(option) {
			console.log(option)
			this.order_id = option.order_id
			this.getDetail(option.order_id)
		},
		onShow() {
			// this.address = uni.getStorageSync("address")||null
			// console.log(this.address)
		},
		methods: {
			queShou(e){
				let _this = this
				receive({order_id:e}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:res.msg,
							success() {
								setTimeout(function(){
									_this.orderDetail = {
										..._this.orderDetail,
										status:'4'
									}
								},1000)
							}
						})
					}
				})
			},
			pingjia(e){
				uni.navigateTo({
					url:'/package/orderDetail/comments?order_id='+e
				})
				
			},
			towuliu(e){
				uni.navigateTo({
					url:'/package/orderDetail/wuliu?id='+e
				})
			},
			copy(e) {
				console.log(e)
				uni.setClipboardData({
					data: String(e),
					success: function(res) {
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					}
				})
			},
			getDetail(order_id) {
				const data = {
					order_id: order_id
				}
				getOrderDetail(data).then(res => {
					this.orderDetail = res.data.info

				})
			},
			selectAddr() {
				console.log(111)
				if (this.$store.state.address) {
					uni.navigateTo({
						url: "/package/address/index"
					})
				} else {
					uni.navigateTo({
						url: "/package/address/addrSet?forId=addorder"
					})
				}

			},
			pay() {
				payOrder({
					order_sn: this.orderDetail.sn
				}).then(res => {
					console.log(res)
					uni.requestPayment({
						"provider": "wxpay",
						"nonceStr": res.data.nonceStr, // 随机字符串
						"package": res.data.packageVal,
						"signType": res.data.signType, // 固定值
						"timeStamp": res.data.timeStamp, // 时间戳（单位：秒）
						"paySign": res.data.paySign, // 签名，这里用的 MD5/RSA 签名
						success(res) {
							console.log(res)
							uni.showModal({
								title: '温馨提示',
								content: '支付成功',
								cancelText: '返回首页',
								confirmText: '我的订单',
								success: function(res) {
									if (res.confirm) {
										this.getDetail(this.order_id)
										console.log('用户点击确定');
										// order_id
									} else if (res.cancel) {
										uni.switchTab({
											url: '/pages/active/index'
										})
									}
								}
							});
						},
						fail(e) {
							console.log(e)
							uni.showModal({
								title: '温馨提示',
								content: '支付失败',
								cancelText: '返回首页',
								confirmText: '我的订单',
								success: function(res) {
									if (res.confirm) {
										this.getDetail(this.order_id)
										console.log('用户点击确定');
										// order_id
									} else if (res.cancel) {
										uni.switchTab({
											url: '/pages/active/index'
										})
									}
								}
							});
						}
					})
				})
			},

			deleteOrder(e) {
				const data = {
					user_id: uni.getStorageSync("userInfo").user_id,
					order_id: e
				}
				this.load = true
				let _this = this
				uni.showModal({
					title: "提示",
					content: "是否删除订单",
					success(res) {
						if (res.confirm) {
							delOrder(data).then(res => {
								_this.load = false
								uni.showToast({
									title: "删除成功",
									icon: 'none'
								})
								uni.navigateBack()
							}).catch(err => {
								_this.load = false
								uni.showToast({
									title: err.msg,
									icon: 'none'
								})
							})
						}
					}
				})

			},
			cancelOrder(e) {
				
				console.log(e)
				const data = {
					order_id: e
				}
				this.load = true
				let _this = this
				uni.showModal({
					title: "提示",
					content: "是否取消订单",
					success(res) {
						if (res.confirm) {
							cancelOrder(data).then(res => {
								_this.load = false
								uni.showToast({
									title: "取消成功",
									success:function() {
										setTimeout(function(){
											_this.orderDetail = {
												..._this.orderDetail,
												status:'0'
											}
										},1000)
									}
								})
							
							}).catch(err => {
								_this.load = false
								uni.showToast({
									title: err,
									icon: 'none'
								})
							})
						}
					}
				})
			},
			payOff(e) {
				const data = {
					order_id: e
				}
				this.load = true
				let _this = this
				refundOrder(data).then(res => {
					this.load = false
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
					setTimeout(function() {
						_this.getDetail(e)
					}, 1500)

				}).catch(err => {
					this.load = false
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			toIndex() {
				uni.switchTab({
					url: '/pages/active/index'
				})
			},
			toMine() {
				uni.switchTab({
					url: '/pages/mine/my'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.b_part{
		background-color: #fff;
		padding: 22px 10px;
		font-size: 12px;
		.bp_item{
			display: flex;
			align-items: center;
			.copy_btn{
				width: 30px;
				height: 20px;
				border: 1px solid #666;
				text-align: center;
				line-height: 20px;
				border-radius: 5px;
				margin-left: 10px;
			}
		}
	}
	.ib-t{
		display: flex;
		justify-content: space-between;
		font-weight: 700;
	}
	.cus-info{
		padding: 18px 12px;
		background-color: #fff;
		font-size: 13px;
		color: #666;
		display: flex;
		align-items: center;
		.id-label{
			margin-right: 10px;
		}
	}
	page {
		background: #f2f2f2 !important;
	}

	.con {
		background: #f2f2f2 !important;
	}

	.bold {
		font-weight: 700;
	}

	.c3 {
		color: #333;
		font-weight: 700;
	}

	.a-center {
		align-items: center;
	}

	.j-end {
		justify-content: flex-end;
	}

	.col {
		flex-direction: column;
	}

	@mixin xcxs {
		display: inline-block;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: relative;
	}

	.total-box {
		padding: 4px 15px 16px;
		border-top: 1px solid #f2f2f2;
		display: flex;
		align-items: center;
		background-color: #fff;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;

		.t_l {

			font-size: 14px;
			color: #666;

			.fare {
				color: #999;
				font-size: 12px;
			}

			.amount {
				color: #fe3b30;

				.money {
					font-size: 18px;
				}
			}
		}

		.t_r {
			flex: 1;
			// width: 35%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.btn_item {
				width: 30%;
				margin: 0 2px;
			}
		}

	}

	.bottom_fg {
		height: 62px;
	}

	.body {
		.flex {
			display: flex;
			align-items: center;
		}

		.boxshadow {
			// border-radius: 10px;
		}
		
		.d_box {
			width: 100%;
			// padding: 15px 10px;
			// margin-top: 10px;
			background-color: #fff;
			// margin-bottom: 10rpx;
			.l {
				flex: 1;
			}

			.title {
				width: 95%;
				padding: 20rpx 2.5%;
				font-size: 14px;
				color: #333;

			}

			.info {
				width: 95%;
				padding: 20rpx 2.5% 24rpx;
				font-size: 14px;
				// border-top: 1px solid #f4f4f4;

				.i_bottom {
					margin-top: 5px;
					font-size: 12px;
					.icon-dizhi {
						width: 20px;
						height: 20px;
						margin-right: 7px;
						background: url(https://img-cdn.duobashuzi.com/xianggui/img/m_dz.png);
						@include xcxs;
					}

					.icon-dizhi1 {
						width: 40px;
						height: 39px;
						margin-right: 7px;
						background: url(https://img-cdn.duobashuzi.com/xianggui/img/m_dd.png);
						@include xcxs;
					}

					.ib-r {
						flex: 1;

						text {
							display: block;
							color: #333;
							padding: 5rpx 0;
						}
					}
				}

			}
		}
		.address{
			background: url('https://img.duobashuzi.com/xiangguijia/addr_b.png') no-repeat  bottom;
			background-size: 100%;
			background-color: #fff;
			margin: 0;
		}
		.f_box {
			// margin-top: 10px;
			background: #fff;

			.ul {
				// padding-top: 5px;
			}

		}

		.ul_row {
			border-top: 1px solid #f4f4f4;
			padding: 20rpx 0;

			.li {
				width: 100%;
				color: #333;
				font-size: 14px;
				text-align: right;

				text {
					color: #fe3b30;
				}
			}

			.col {
				.r {
					.textarea {
						box-sizing: border-box;
						padding: 10px;
						text-align: left;
						font-size: 14px;
						color: #333;
						height: 86px;
						flex: 1;
						width: 100%;
					}
				}
			}
		}

		.o-box {

			// margin-top: 10px;
			.title {
				padding: 15px 10px;
				display: flex;
				justify-content: space-between;
				border-bottom: 0.5px solid #ededed;
			}

			.cont {
				.li_item {
					font-size: 14px;
					color: #333;
					padding: 10px;
					background: #fff;
					display: flex;
					justify-content: space-between;
					margin-bottom: 2rpx;

					.field {
						color: #999;
					}

					.val {
						color: #333;
					}

					.code_num {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}

	.go_home {
		width: 85%;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;

		view {
			width: 40%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 10px;
			background-color: #e54d42;
			color: #fff;
		}
	}
</style>